<!-- 设备管理 -->
<template>
  <!-- 顶部 搜索栏 -->
  <el-form :model="form" class="demo-form-inline" :inline="true">
    <el-form-item label="设备名称">
      <el-input v-model="seachValue.name" clearable />
    </el-form-item>
    <el-form-item label="设备类型">
      <el-cascader
        style="width: 100%"
        v-model="seachValue.DevicetypeValue"
        :options="options"
        :show-all-levels="false"
        clearable
        placeholder="请选择设备类型"
        :props="{ value: 'DevicetypeValue', label: 'DevicetypeName', checkStrictly: true }"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getSeachList"
        ><el-icon><Search /></el-icon> 搜索
      </el-button>
      <el-button @click="rest"
        ><el-icon><Refresh /></el-icon> 重置
      </el-button>
    </el-form-item>
  </el-form>

  <el-row :gutter="10">
    <el-col :span="1.5">
      <el-button type="primary" plain size="mini" @click="addDevice" :disabled="buttonshow"
        ><el-icon><Plus /></el-icon> 新增设备
      </el-button>
    </el-col>
    <!-- <el-col :span="1.5">
        <el-button type="danger" plain size="mini" @click="delall"
          ><el-icon><Delete /></el-icon>删除</el-button
        >
      </el-col> -->
  </el-row>

  <!-- table 表格 -->
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; margin-top: 10px"
    show-overflow-tooltip
  >
    <el-table-column type="selection" />

    <el-table-column property="name" label="设备名称" align="center" />

    <el-table-column property="code" label="设备类别" align="center">
      <template #default="scope">{{ scope.row.DevicetypeName }}</template>
    </el-table-column>
    <el-table-column property="region" label="通讯类型" align="center"
      >{{ 485 }}协议</el-table-column
    >
    <el-table-column property="state" label="状态" align="center">
      <template v-slot="scope">
        <span v-if="scope.row.state === '离线'" :style="{ color: 'red' }">{{
          scope.row.state
        }}</span>
        <span v-else-if="scope.row.state === '在线'" :style="{ color: 'green' }">{{
          scope.row.state
        }}</span>
        <span v-else-if="scope.row.state === '可用'" :style="{ color: 'yellowgreen' }">{{
          scope.row.state
        }}</span>
      </template>
    </el-table-column>
    <!-- <el-table-column label="设备操作" align="center">
      <template v-slot="scope">
        <div v-if="scope.row.ComPort">
          <div v-if="scope.row.state === '离线'">
            <el-link :underline="false" @click="OpenCom(scope.row)" style="color: green"
              >Connect</el-link
            >
          </div>
          <div v-if="scope.row.state === '在线'">
            <el-link :underline="false" @click="closeSerial(scope.row)" style="color: red"
              >Disconnect</el-link
            >
          </div>
        </div>
      </template>
    </el-table-column> -->
    <el-table-column label="操作" show-overflow-tooltip align="center">
      <template #default="scope">
        <el-link :underline="false" @click="modify(scope.row)" style="margin-right: 10px"
          >修改</el-link
        >
        <el-popconfirm
          width="220"
          confirm-button-text="是"
          cancel-button-text="否"
          title="是否确认删除"
          @confirm="deldevice(scope.row.id)"
        >
          <template #reference>
            <el-link :underline="false">删除</el-link>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <!-- <el-button @click="test">测试</el-button> -->
  <el-pagination
    style="float: right"
    v-model="currentPage"
    :total="total"
    :page-size="pageSize"
    @current-change="handleCurrentChange"
  ></el-pagination>
  <AddDevice ref="adddeviceref" @update="updateList"></AddDevice>
  <ChangeDevice ref="ChangeDevice" @update="GetNewList"></ChangeDevice>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import AddDevice from './AddDevice.vue'
import ChangeDevice from './changeDevice.vue'
import { ElMessage } from 'element-plus'
import until from '../../until/csUntil/deviceUtils'
export default defineComponent({
  components: {
    AddDevice,
    ChangeDevice
  },
  setup(_, { emit }) {
    const store = useStore()
    // 搜索展示的数组
    const Searchlist = ref([])
    //   顶部输入框 搜索数据
    const seachValue = ref({ name: '', DevicetypeValue: '', isVirtual: 'IS_NOT_VIRTUAL' })
    // 多少页
    const page = ref(0)
    // 一页多少条
    const pagesize = ref(10)
    // 当前页数
    const currentPage = ref(null)
    // 总条数
    const total = ref(null)
    //  每页显示的条目数
    const pageSize = ref(null)
    // 总页数
    const totalPage = ref(null)

    // 页面展示的数组
    const tableData = ref()
    // 页面级联选择器
    const options = ref(null)
    // 修改表单实例对象
    const multipleTableRef = ref(null)

    // 新增设备 组件的实例对象
    const adddeviceref = ref(null)

    // 修改设备 组件的实例对象
    const ChangeDevice = ref(null)

    // 新增虚拟设备 组件实例对象
    const addVirtualDevice = ref(null)

    // 定时器 实例对象
    const timer = ref(null)
    // 新增设备
    const addDevice = () => {
      adddeviceref.value.dialogVisible = true
    }
    // 页面上需要展示的数据
    const checkboxGroup1 = ref(null)

    //  删除设备
    const deldevice = (id) => {
      try {
        const res = window.api.removeDvcAndDvcVersion(id)
        if (res === '删除成功') {
          ElMessage.success('删除成功')
          rest()
        } else {
          ElMessage.error(res)
          rest()
        }
      } catch (e) {
        alert(e)
      }
    }

    // 修改设备
    const modify = (data) => {
      const device = JSON.parse(window.api.getDvcAndDvcVerById(data.id))
      device.ComPort = data.ComPort
      ChangeDevice.value.OpenDialogVisible(device)

      ChangeDevice.value.IOmodelValue = data.pid
    }

    // const displayRuleText = computed(() => {
    //   return (value) => {
    //     const res = window.api.get485DeviceConnected(value.id)
    //     if (res) {
    //       return '在线'
    //     } else {
    //       return '离线'
    //     }
    //   }
    // })

    onMounted(() => {
      rest()
      timer.value = null
      timer.value = setInterval(() => {
        getNewStatus()
      }, 1000)
      let deviceTypeStr = store.state.deviceTypeStr
      let device = JSON.parse(JSON.stringify(deviceTypeStr))
      let filterVirtual = device.children.filter((item) => item.isVirtual === 'IS_NOT_VIRTUAL')
      device.children = filterVirtual
      options.value = [device]

      deviceTypeStr = null
      device = null
    })

    // 重置
    const rest = () => {
      seachValue.value = { name: '', DevicetypeValue: '' }
      newlist(until.seachList({ isVirtual: 'IS_NOT_VIRTUAL' }, page.value, pagesize.value))
      let res = window.api.listDvcAndDvcVer()
      store.commit('beforeAllDeviceupdate', JSON.parse(res))
      getNewStatus()
      res = null
    }

    // 搜索 页面 跳转
    const handleCurrentChange = (newPage) => {
      page.value = newPage - 1
      getSeachList()
    }

    // 搜索
    const getSeachList = () => {
      let seachchange = { isVirtual: 'IS_NOT_VIRTUAL' }
      if (seachValue.value.name && Boolean(seachValue.value.DevicetypeValue) === false) {
        seachchange.name = seachValue.value.name
        newlist(until.seachList(seachchange, page.value, pagesize.value))
      }
      if (Boolean(seachValue.value.name) === false && seachValue.value.DevicetypeValue) {
        const num = seachValue.value.DevicetypeValue[seachValue.value.DevicetypeValue.length - 1]
        seachchange.DevicetypeValue = num
        newlist(until.seachList(seachchange, page.value, pagesize.value))
      }
      if (
        Boolean(seachValue.value.name) === false &&
        Boolean(seachValue.value.DevicetypeValue) === false
      ) {
        newlist(until.seachList({ isVirtual: 'IS_NOT_VIRTUAL' }, page.value, pagesize.value))
      }
    }
    // 更新数据
    const newlist = (res) => {
      const list = res.Searchlist.filter((item) => item.isDelete === 0)

      tableData.value = list
      // tableData.value = list

      currentPage.value = res.totalList.currentPage
      pageSize.value = res.totalList.pageSize
      total.value = res.totalList.total
      totalPage.value = res.totalList.totalPage
    }
    // 更新数据
    const updateList = () => {
      rest()
    }

    const getNewStatus = () => {
      tableData.value.forEach((item) => {
        if (item.isVirtual === 'IS_NOT_VIRTUAL') {
          if (item.DevicetypeValue === 1005) {
            item.state = '可用'
          } else {
            const res = window.api.get485DeviceConnected(item.id)
            if (res) {
              item.state = '在线'
            } else {
              item.state = '离线'
            }
          }
        }
      })
    }

    const GetNewList = () => {
      rest()
    }
    onBeforeUnmount(() => {
      clearInterval(timer.value)
    })
    return {
      timer,
      tableData,
      options,
      multipleTableRef,
      adddeviceref,
      ChangeDevice,
      seachValue,
      currentPage,
      total,
      totalPage,
      checkboxGroup1,
      rest,
      handleCurrentChange,
      addDevice,
      modify,
      deldevice,
      getSeachList,
      newlist,
      updateList,
      GetNewList
    }
  }
})
</script>
  
  <style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>